<!-- 项目单 -->
<template>
  <div class="main-content-container">
    <div ref="search" style="padding-bottom: 10px">
      <el-row type="flex" justify="space-between" class="mt10">
        <!-- <el-col>
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
          <el-form-item>
            <el-input v-model="searchForm.custQuery" placeholder="姓名、手机号、编号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col> -->
        <el-col class="searchs-y">
          <el-form ref="searchFormRef" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、编号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
              <el-form-item v-if="false" class="spn buttons clear-button">
                <el-button type="primary" @click="eliminate">清除</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row class="mt10" type="flex">
        <Search :data="selections" :attribute="'createdTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
        <DictionarySelector class="dictSelector el-select-y" placeholder="请选择项目类型" :value.sync="searchForm.productAttributes" code="swan_department_xmlx" @change="handleChange" />
        <el-select v-model="searchForm.orderManId" class="el-select-y" filterable clearable placeholder="请选择开单人" style="margin-left:10px" @change="handleChange">
          <el-option v-for="item in personnelList" :key="item.id" :label="item.usrName" :value="item.id" />
        </el-select>
      </el-row>
      <el-row class="mt10">
        <Tabs v-model="searchForm.status" :data="filtrateList" @change="handleConditionChange" />
      </el-row>
    </div>
    <!-- 表单区域 -->
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loading" :data="chargeList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="项目单号" prop="productNo" show-overflow-tooltip />
        <el-table-column label="名称" prop="projectName" show-overflow-tooltip />
        <!-- <el-table-column label="项目属性" prop="productAttributes" /> -->
        <el-table-column label="顾客" prop="customerName" show-overflow-tooltip />
        <el-table-column label="性别" prop="customerSex" show-overflow-tooltip />
        <el-table-column label="科室" prop="deptName" show-overflow-tooltip />
        <el-table-column label="主治医生" prop="attendingDoctor" show-overflow-tooltip />
        <el-table-column label="金额" prop="price" show-overflow-tooltip />
        <el-table-column label="收款时间" show-overflow-tooltip min-width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.collectionTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开单人" prop="orderMan" show-overflow-tooltip />
        <el-table-column label="状态" prop="status" show-overflow-tooltip />
        <el-table-column label="剩余有效期" prop="remnantCount" show-overflow-tooltip min-width="90">
          <template slot-scope="{ row }">
            <span>
              {{ row.remnantCount > 0?row.remnantCount:'0' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="剩余次数" prop="usageCount" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.usageCount }}/{{ row.contentCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="{row}">
            <el-button type="text" @click="toViewBtn(row.id)">查看</el-button>
            <el-button v-if="row.status === '未结束'" type="text" @click="handleSchedule('AddDeduction',row)">划扣</el-button>
            <el-button v-if="row.productAttributes === '美容项目' ||row.productAttributes === '手术项目'" type="text" @click="handleSchedule('AddMedical',row)">写病历</el-button>
            <el-button v-if="row.productAttributes === '美容项目' || row.productAttributes === '手术项目'" type="text" @click="handleSchedule('AddpRescriptionDialog',row)">开处方</el-button>
            <el-button v-if="row.status === '未结束'" type="text" @click="addTriageBtn(row)">预约登记</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <!-- 项目单详情 -->
    <Details ref="detailsRef" :visible.sync="visible" :title="title" />
    <Triage ref="addTriageRef" :visible.sync="show" :title="title" :test-btn="textBtn" @success="getChargeList" />
    <!-- <Subscribe ref="addSubscribeRef" :visible.sync="flag" :title="title" :test-btn="textBtn" :flag="false" @success="getChargeList" /> -->
    <component :is="currentComponent" ref="commonComp" :selected-row="selectedRow" @componentResult="componentResult" @childMounted="childMounted" @success="getChargeList" />
  </div>
</template>
<script>
import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
import { selections } from "@/config";
import Details from "./dialog";
import Triage from "../triage/dialog";
// import Subscribe from "../triage/dialog";
import { lookup, tableColor, labelHeigh } from "@/utils/common";
import Tabs from "@/components/SearchSelection";
export default {
  components: {
    TypeSelection,
    Search,
    Details,
    Triage,
    Tabs,
    // Subscribe,
    AddDeduction(resolve) {
      require(["../../diagnose/curetask/drawDialog"], resolve);
    },
    AddMedical(resolve) {
      require(["../../diagnose/curetask/medicalDialog"], resolve);
    },
    AddpRescriptionDialog(resolve) {
      require(["../../diagnose/curetask/prescriptionDialog"], resolve);
    },
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      selections,
      custQuery: "",
      filtrateList: [
        {
          name: "全部",
          id: "全部",
        },
        {
          name: "未结束",
          id: "未结束",
        },
        {
          name: "已结束",
          id: "已结束",
        },
        {
          name: "已退款",
          id: "已退款",
        },
      ],
      value: "全部",
      searchForm: {
        status: "未结束",
        productAttrib: "项目类",
        paymentStatus: "已收款",
      },
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      chargeList: [],
      title: "",
      textBtn: "",
      visible: false,
      loading: false,
      show: false,
      flag: false,
      currentComponent: "",
      selectedRow: {},
      personnelList: [],
    };
  },
  mounted() {
    this.getChargeList();
    this.personnelList = lookup();
    this.$nextTick(function() {
      this.innerHeight = labelHeigh(this.$refs.search);
    });
  },
  methods: {
    eliminate() {
      this.custQuery = "";
      this.params.page = 1;
      this.getChargeList();
    },
    handleSchedule(name, row) {
      this.currentComponent = name;
      this.$set(row, 'orderListId', row.id);
      this.selectedRow = row;
    },
    childMounted() {
      this.$refs.commonComp.openDialog(this.selectedRow);
    },
    componentResult(type) {
      this.currentComponent = "";
    },
    async getChargeList() {
      this.searchForm.deptId = this.$store.getters.currentUserInfo.deptUsrList[0].deptId;
      if (!this.searchForm.deptId) {
        this.searchForm.deptId = 0;
      }
      if (!this.searchForm.productAttributes) this.searchForm.productAttributes = undefined;
      if (!this.searchForm.orderManId) this.searchForm.orderManId = undefined;
      if (!this.searchForm.createdTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        this.searchForm.timeType = "today";
        this.searchForm.createdTime = beginTime + "_" + endTime;
      }
      const searchForm = JSON.parse(JSON.stringify(this.searchForm));
      if (searchForm.status === "全部") searchForm.status = undefined;
      this.loading = true;
      const res = await this.$api["department/projectmenu/projectList"]({
        ...this.params,
        query: searchForm,
        custQuery: this.custQuery,
      });
      this.loading = false;
      if (res.code !== 200) return this.$message.error("查询项目单列表失败！");
      this.chargeList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    // 搜索
    searchBtn() {
      this.getChargeList();
    },
    // 项目单详情
    toViewBtn(id) {
      this.title = "项目单详情";
      this.visible = true;
      this.$refs.detailsRef.toViewBtn(id);
    },
    addTriageBtn(row) {
      this.title = "添加分诊";
      this.textBtn = "提交";
      this.show = true;
      this.$nextTick(() => {
        this.$refs.addTriageRef.addTriage('add', row);
      });
    },
    addSubscribeBtn(row) {
      this.title = "添加预约";
      this.textBtn = "提交";
      this.flag = true;
      this.$refs.addSubscribeRef.addSubscribe(row);
    },
    // 顶部时间筛选
    handleDateChange(val) {
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleTypeChange(val) {
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleChange() {
      this.params.page = 1;
      this.getChargeList();
    },
    handleConditionChange(val) {
      this.searchForm.status = val;
      this.getChargeList();
    },
  },
};
</script>
<style lang="scss" scoped>

</style>
